<template>
  <view class="list-item-wrapper">
    <view class="list-item">
      <view class="label">{{label}}</view>
      <view class="value">{{right}}
        <view class="image-wrapper">
          <image class="image" v-if="showRight" src="/static/right.png" />
        </view>
      </view>
    </view>
  </view>

</template>
<script setup>
  const props = defineProps({
    label: String,
    right: String,
    showRight: {
      type: Boolean,
      default: true,
    },
  });
</script>

<style scoped lang="scss">
  .list-item-wrapper {
    padding: 0 30rpx;
    margin-bottom: 22rpx;

    .list-item {
      border-radius: 20rpx;
      padding: 36rpx;
      background-color: #1e1e1e;
      display: flex;
      justify-content: space-between;
      .label{
        font-size: 30rpx;
        color: #999999;
      }
      .value{
        font-size: 30rpx;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        .image-wrapper{
          width: 11rpx;
          height: 21rpx;
          margin-left: 20rpx;
        }
        .image{
          width: 11rpx;
          height: 21rpx;
        }
      }
    }
  }
</style>
